<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
		
        <div class="container mt-1">
          <el-form inline size="small">
			<div class="flex items-center search_form">
				
				
				 <div style="margin-left: 10px;">
					<!-- <el-button type="primary" size="mini" @click="mySearch">搜索</el-button>
					<el-button size="mini" @click="reset">重置</el-button> -->
					<el-button type="primary" size="mini" @click="addBtn">添加</el-button>
				 </div>
			</div>
			
           
			
           
          </el-form>
        </div>
      </div>
      <el-table
        :data="result"
        style="width: 100%"
        size="mini"
        height="600px"
        :highlight-current-row="true"
        :header-cell-style=" {fontWeight:'bold'}"
      >
        
            <el-table-column  align="center"   prop="uname"  label="登录名"></el-table-column>
			<el-table-column  label="密码"  align="center">
			    <template slot-scope="scope">
			        <el-input  type="password"
						size="mini"
						v-model="scope.row.upwd" @blur="updateUpwd(scope.row.id,scope.row.upwd)" />
			    </template>
			</el-table-column>
			<el-table-column   align="center"    prop="company_name"    label="名称"></el-table-column>
            <el-table-column    align="center"  label="所属地区">
				<template slot-scope="scope">
					{{ scope.row.post_job_name }}
				    <!-- {{jobType.filter(item)=>{ item.id==scope.row.job}}} -->
					<!-- {{jobType.filter((item)=>{ return item.id==scope.row.job })[0].post_name}} -->
				</template>
			</el-table-column>
			<el-table-column  label="状态"  align="center">
				<template slot-scope="scope">
				   <el-switch
				     v-model="scope.row.mark"
					 :inactive-value="'0'"
					 :active-value="'1'"
					 @change="changeData(scope.row)"
					 >
				   </el-switch>
				</template>
			</el-table-column>
            <el-table-column  label="操作"  fixed="right"  align="center">
                <template slot-scope="scope">
                    <el-button @click="updateData(scope.row)" type="text" size="small">更新</el-button>
                    <el-button type="text" size="small" @click="delData(scope.row.uid,scope)">删除</el-button>
                </template>
            </el-table-column>
		
        <!-- <el-table-column label="操作" min-width="130" fixed="right">
          <template slot-scope="scope">
			<el-button type="text" @click="editRow(scope.row)">编辑</el-button>
			<el-button type="text" @click="delRow(scope.row.id)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
	  <div class="page">
	              <el-pagination
	                      background
	                      @size-change="pageChange"
	                      @current-change="handleCurrentChange"
	                      :current-page="page"
	                      :page-size="pageSize"
	                      layout="total, sizes, prev, pager, next, jumper"
	                      :total="page_totle">
	              </el-pagination>
	          </div>
    </el-card>
	
	<!-- 新增角色 -->
	<el-dialog
		        :title="title"
				:close-on-click-modal="false"
		        :visible.sync="isShow"
		        width="700px"
		>
		    <el-form  :model="info" label-width="160px">
		        <el-form-item label="名称">
		            <el-input size="small" v-model="info.company_name" style="width: 500px"></el-input>
		        </el-form-item>
		    <el-form-item label="登录名">
		        <el-input size="small" v-model="info.uname" style="width: 500px"></el-input>
		    </el-form-item>
		    <el-form-item label="密码" v-if="title=='添加'">
		        <el-input size="small" type="password"  v-model="info.upwd" style="width: 500px"></el-input>
		    </el-form-item>
			<el-form-item label="所属地区">
			    <el-select v-model="info.job"   size="small">
			        <el-option
			          v-for="item in jobType"
			          :key="item.id"
			          :label="item.post_name"
			          :value="item.id">
			        </el-option>
			      </el-select>
			</el-form-item>
			<el-form-item label="状态">
			    <el-radio-group v-model="info.mark">
			       <el-radio label="0">不启用</el-radio>
			        <el-radio label="1">启用</el-radio>
			     </el-radio-group>
			</el-form-item>
			
		    </el-form>
		    <span slot="footer" class="dialog-footer">
		            <el-button @click="isShow = false" size="mini">取 消</el-button>
		            <el-button  type="primary" size="mini" @click="confirm">
						确 定
					</el-button>
		        </span>
		</el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        result:[],
        isShow:false,
        title:'添加',
        info:{
            id:undefined,
            company_name:"", //名称
            uname:"", //登录名
            upwd:"",//密码
            job:"",//岗位
            mark:'1',//启用标志
        },
        jobType:[],
		page:1,
		pageSize:10,
		page_totle:0
      }
    },
    mounted() {
		this.lodeList()         
		this.lodejob()
    },
    methods: {
        lodejob(){
			    this.$api.post('/system/postJobList',{status:1},res=>{
			    	 let result = res.data
			    	if(result.code == 200){
						// this.result = result.data
						this.jobType = result.data
			    	}
			    })
				this.$api.post('/system/postJobList',{status:1}).then(result=>{
			    	if(result.code == 200){
						// this.result = result.data
						this.jobType = result.data.result
			    	}
				})
			},
			changeData(row){
				for(let i in this.info){
					this.info[i] = row[i]
				}
				this.confirm()
			},
			delData(uid,scope){
				let index = scope.$index
				this.$confirm('确定删除该用户', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.$api.post('/system/delUserAdmin',{id:uid},res=>{
						let result = res.data
						if(result.code == 200){
							this.$message.success('删除成功')
							this.result.splice(index,1)
							
						}
					})
				})
			},
			updateData(row){
				for(let i in this.info){
					this.info[i] = row[i]
				}
				this.isShow = true
				this.title = '修改'
			},
			updateUpwd(uid,upwd){
				if(upwd.indexOf('*')!=-1 || !upwd) return
				this.$confirm('确定修改密码', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
			
					this.$api.post('/system/editUserUpwdAdmin',{id:uid,upwd}).then(result=>{
						if(result.code == 200){
							this.$message.success('修改成功')
						}
					})
				})
			},
			confirm(){
				this.$api.post('/system/addEditUserAdmin',this.info).then(result=>{
					if(result.code == 200){
						this.$message.success(result.msg)
						this.isShow = false
						this.lodeList()
					}else{
						this.$message.error(result.msg)
					}
				})
			},
            addBtn(){
				this.isShow = true
				this.title = '添加'
				this.info = {
					id:undefined,
					uname:"", //登录名
					upwd:"",//密码
					job:"",//岗位
					mark:'1',//启用标志
					company_name:"", //名称
				}
			},
            lodeList(){
				let params = {
					page:this.page,
					pageSize:this.pageSize,
				}
				
				this.$api.post('/system/userList',params).then(result=>{
					console.log(result)
					if(result.code == 200){
						for(let item of result.data.result){
							item.upwd = '******'
						}
						this.result = result.data.result
						this.page_totle = result.data.count
			    	}
				})
            },
      
    }
  }
</script>
